<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="" method="post">
      学号:<input type="text" id="sid" placeholder="请输入学号" /> <br />
      姓名:<input type="text" id="sname" placeholder="请输入姓名" /> <br />
      性别: <input type="radio" name="sex" id="boySex" value="男" checked />男
      <input type="radio" name="sex" id="girlSex" value="女" />女
      <input type="radio" name="sex" id="girlSex2" value="X" />X
      <input type="radio" name="sex" id="girlSex3" value="人妖" />人妖
      <input type="radio" name="sex" id="girlSex4" value="保密" />保密 <br />
      <button type="button" onclick="addStu()">新增</button>
      <button type="button" onclick="delCheckedStu()">删除选中</button>
    </form>
    <hr />
    <table border="1">
      <thead>
        <tr>
          <th><input type="checkbox" onclick="doCheckedStu()" /></th>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="stuDataList">
        <tr id="S1">
          <td><input type="checkbox" name="sid" value="S1" /></td>
          <td>S1</td>
          <td>张三</td>
          <td>男</td>
          <td>
            <a href="">查看/修改</a>
            <a href="javaScript:delStu('S1')">删除</a>
          </td>
        </tr>
        <tr id="S2">
          <td><input type="checkbox" name="sid" value="S2" /></td>
          <td>S2</td>
          <td>李四</td>
          <td>女</td>
          <td>
            <a href="">查看/修改</a>
            <a href="javaScript:delStu('S2')">删除</a>
          </td>
        </tr>
        <tr id="S3">
          <td><input type="checkbox" name="sid" value="S3" /></td>
          <td>S3</td>
          <td>王五</td>
          <td>男</td>
          <td>
            <a href="">查看/修改</a>
            <a href="javaScript:delStu('S3')">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
<script>
  //删除被选中的学生
  function delCheckedStu() {
    var checkCompAy = document.querySelectorAll("[name='sid']:checked")
    if (checkCompAy.length == 0) {
      alert('请选择要删除的记录')
      return
    }
    if (confirm('您确认删除吗?')) {
      for (var i = 0; i < checkCompAy.length; i++) {
        //var id = checkCompAy[i].parentNode.parentNode.id
        var id = checkCompAy[i].value
        console.log('==========要删除的id是:' + id)
        delStu(id)
      }
    }
  }

  //实现全选 全不选 反选功能
  function doCheckedStu() {
    var checkboxCompAy = document.getElementsByName('sid')
    for (var i = 0; i < checkboxCompAy.length; i++) {
      checkboxCompAy[i].checked = !checkboxCompAy[i].checked
    }
  }
  //根据 id 删除功能
  function delStu(sid) {
    //通过 学号sid  获得 tr 元素
    var trDelComp = document.getElementById(sid)
    console.log('=============:' + trDelComp)
    //删除
    trDelComp.remove()
  }

  //新增功能
  function addStu() {
    //获得用户输入的学号
    var sid = document.getElementById('sid').value
    var sname = document.getElementById('sname').value
    var sex = document.querySelector('[name="sex"]:checked').value
    console.log('用户输入的学号是:' + sid + ',姓名:' + sname + ',性别:' + sex)

    //获得tbody原有的内容
    var tbodyData = document.getElementById('stuDataList').innerHTML
    tbodyData +=
      '<tr id="' +
      sid +
      '">\
          <td><input type="checkbox" name="sid" value="' +
      sid +
      '" /></td>\
          <td>' +
      sid +
      '</td>\
          <td>' +
      sname +
      '</td>\
          <td>' +
      sex +
      '</td>\
          <td>\
            <a href="">查看/修改</a>\
            <a href="javaScript:delStu(\'' +
      sid +
      '\')">删除</a>\
          </td>\
        </tr>'
    console.log('================' + tbodyData)
    document.getElementById('stuDataList').innerHTML = tbodyData
  }
</script>
